<template>
  <div>
    <div ref="chartColumn" style="width:558px; height:370px;"></div>
<!--    <button @click="changeOption">点击改变内容</button>-->
  </div>

</template>

<script>
import { getTisTics } from "@/api/industry/shulian";
import * as echarts from 'echarts';
export default {
  data() {
    return {
      chartColumn: null,
      option: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          top: '1%',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
              zIndex:9999
            },
            label: {
              show: false,
              // position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontColor:'red',
                formatter: '{d}%'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              //数据由接口获取

            ]
          }
        ]
      }
    }
  },
  methods: {
    //统计产业物理空间信息
    updateChartWithData() {
      getTisTics().then(res => {
        // console.log(res,'饼状图1信息')
        const newData = [
          // { value: `${res.data.workshop.sum}`, name: '厂房' },
          // { value: `${res.data.apartment.sum}`, name: '公寓' },
          // { value: `${res.data.land.sum}`, name: '土地' },
          // { value: `${res.data.auction.sum}`, name: '拍卖' },

          { value: `${res.data.premises.sum}`, name: '楼宇办公' },
          { value: `${res.data.workshop.sum}`, name: '厂房' },
          { value: `${res.data.land.sum}`, name: '土地' },
          { value: `${res.data.warehouse.sum}`, name: '仓库' },
          { value: `${res.data.park.sum}`, name: '园区' },
          { value: `${res.data.warehouse.sum}`, name: '公寓' },
          { value: `${res.data.auction.sum}`, name: '拍卖' },
          { value: `${res.data.building.sum}`, name: '楼宇商用' }
        ];
        this.option.series[0].data = newData;
        this.chartColumn.setOption(this.option);
      });
    },
    initChart() {
      this.chartColumn = echarts.init(this.$refs.chartColumn);
      // Uncomment the following line if you want to show a loading animation during the API request
      // this.chartColumn.showLoading();

      // Fetch API data and update the chart
      this.updateChartWithData();
    }
  },
  mounted() {
    this.initChart();
  }
}
</script>

<style scoped>

</style>
